<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <%@ include file="common.jsp" %>
    <script src="/static/plugins/echart/echarts.common.min.js"></script>
    <script type="text/javascript" src="/static/js/clientEchart.js"></script>
    <script>
        $(function () {
            //销售笔数
            $.get('/clientEchart/selectByNumber.do',function (data) {
                $("#salecount").html(data);
            },"json");
            //销售总额
            $.get('/clientEchart/totalPrice.do',function (data) {
                $("#totalPrice").html(data);
            },"json");
            //消费最高会员
            $.get('/clientEchart/clientName.do',function (data) {
                $("#clientName").html(data);

            },"json");

        });
    </script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<table border="1" cellpadding="0" cellspacing="0" style="width: 500px; height: 180px;">
    <tr>
        <td>
            <div style="width: auto;height: auto;" >
                <p style="font-size: 14px">销售产品笔数</p>
                <p style="font-size: 25px" align="center">
                    <span style="color: darksalmon" class="fonts24 colorff">
                        <i id="salecount">0</i>件
                    </span>
                </p>
            </div>
        </td>
        <td>
            <div style="width: auto;height: auto">
                <p style="font-size: 14px">销售额</p>
                <p style="font-size: 25px" align="center">
                    <span style="color: darksalmon" class="fonts24 colorff">¥
                        <i id="totalPrice">0</i>
                    </span>
                </p>
            </div>
        </td>
        <td>
            <div style="width: auto;height: auto">
                <p style="font-size: 14px">单笔购买最高的价格</p>
                <p style="font-size: 25px" align="center">
                    <span style="color: darksalmon" class="fonts24 colorff">¥
                        <i id="clientName"></i>
                    </span>
                </p>
            </div>
        </td>
    </tr>
</table>

<div id="main" style="width: 1500px;height:600px;"></div>

<%---------%>


<script type="text/javascript">


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '会员销售排行',
            subtext: '会员'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['金额'],
            right:'150px'
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis :
            {
                type : 'category',
                data : ${x}
            },

        yAxis :
            {

                type : 'value'
            },
        series : [
            {
                name:'销售总额',
                type:'bar',
                data:${y},
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    // ---------------------------------------------


</script>

<div id="cli_toolbar" >
    <input id="keyword" name="keyword" class="easyui-searchbox"
           data-options="prompt:'输入会员名'" style="width:200px"/>
    <a class="easyui-linkbutton" iconCls="icon-dog"  data-method="export" plain="true">导出</a>
    <a class="easyui-linkbutton" iconCls="icon-reload" plain="true" data-method="reload">刷新</a>
</div>
<div style="height: 600px;width: 1500px">
    <table id="cli_datagrid"></table>
</div>
</body>
</html>